<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>MyStore-ProjectManagment</title>
    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport'/>
    <link rel="icon" th:href="@{/assets/img/icon.ico}" type="image/x-icon"/>
    <div th:replace="commom/bar :: commom_css"></div>
</head>
<body>
<div class="wrapper">
    <div th:replace="commom/bar :: topbar"></div>

    <!-- Sidebar -->
    <div th:replace="commom/bar :: sidebar"></div>
    <!-- End Sidebar -->

    <div class="main-panel">
        <div class="content">
            <div class="page-inner">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="row row-nav-line">
                                    <ul class="nav nav-tabs nav-line nav-color-secondary" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active show" id="pills-one-tab-nobd" data-toggle="pill" href="#pills-one-nobd" role="tab" aria-controls="pills-one-nobd" aria-selected="true">我的收藏</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card-body tab-pane fade show active" role="tabpanel" aria-labelledby="pills-one-tab-nobd">
                                <div class="tab-content mt-2 mb-3" id="pills-without-border-tabContent">
                                    <div class="tab-pane fade show active" id="pills-one-nobd" role="tabpanel" aria-labelledby="pills-one-tab-nobd">
                                            <!-- 分页容器：显示数据 -->
                                            <div id="myStoreProject" class="row"></div>
                                            <!-- 分页容器： 显示分页按钮-->
                                            <div class="text-center">
                                                <!-- 注意:3版本的分页容器标签是<ul>，2版本的容器标签是<div> -->
                                                <ul id="myStoreProjectPage" class="pagination"></ul>
                                            </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--公共JS-->
<th:block th:replace="commom/bar :: commom_js" />
<!--公共JS-->
<th:block th:replace="commom/bar :: nav_js" />

<!--加载我的收藏-->
<script type="text/javascript">
    var divName = $('#myStoreProject');
    //加载我的收藏项目
    $(function () {
        $(divName).html("");
        addMyStoreProjectPage(divName, myStoreProjectPage);
    });

    //我的所有项目
    function addMyStoreProjectPage(div,ul) {
        pageStart();//开始分页
        function pageStart() {//分页函数
            $.ajax({ //去后台查询第一页数据
                type: "Get",
                url: "/getMyProjectStore",
                dataType: "json",
                data: {
                    page: '1',
                },
                success: function (data) {
                    myprojectAppendHtml(data.list,div,1);//处理第一页的数据
                    var options = {//根据后台返回的分页相关信息，设置插件参数
                        bootstrapMajorVersion: 3, //如果是bootstrap3版本需要加此标识，并且设置包含分页内容的DOM元素为UL,如果是bootstrap2版本，则DOM包含元素是DIV
                        currentPage: data.page, //当前页数
                        totalPages: data.totalPage, //总页数
                        numberOfPages: data.pageSize,//每页记录数
                        itemTexts: function (type, page, current) {//设置分页按钮显示字体样式
                            switch (type) {
                                case "first":
                                    return "首";
                                case "prev":
                                    return "<";
                                case "next":
                                    return ">";
                                case "last":
                                    return "末";
                                case "page":
                                    return page;
                            }
                        },
                        onPageClicked: function (event, originalEvent, type, page) {//分页按钮点击事件
                            $.ajax({//根据page去后台加载数据
                                url: "/getMyProjectStore",
                                type: "get",
                                dataType: "json",
                                data: {
                                    page: page,
                                },
                                success: function (data) {
                                    myprojectAppendHtml(data.list,div,page);//处理数据
                                }
                            });
                        }
                    };
                    $(ul).bootstrapPaginator(options);//设置分页
                }
            });
        }
    }

    function myprojectAppendHtml(list,div,page) {//此函数用于处理后台返回的数据，根据自己需求来实现页面拼接
        var tableShow = '';
        for (var i = 0; i < list.length; i++) {
            if(list[i].storeFlag==1){
                var storecolor = "#F29F3F";
                var storefunction = "cancelstore";
            }else if(list[i].storeFlag==0){
                var storecolor = "darkgrey";
                var storefunction = "addstore";
            }
            if(list[i].likeFlag==1){
                var likecolor = "#C1194E";
                var likefunction = "cancellike";
            }else if(list[i].likeFlag==0){
                var likecolor = "darkgrey";
                var likefunction = "addlike";
            }

            tableShow += '<div class="col-lg-10">\n' +
                '<a href="/projects_view/' + list[i].projectId + '">\n' +
                '<h2 style="color: #145180">\n'+
                '<i class="fas fa-file-alt"></i>&nbsp;' + list[i].projectName +
                '</h2>\n' +
                '</a>\n' +
                '<span style="color: #4e555b">\n' +
                '<i class="fas fa-user-tie"></i>项目管理员：' + list[i].chargeUser +
                '</span>&nbsp;&nbsp;&nbsp;&nbsp;\n' +
                '<span style="color: #4e555b">\n' +
                '<i class="far fa-gem"></i>项目类型：'+ list[i].type +
                '</span>&nbsp;&nbsp;&nbsp;&nbsp;\n' +
                '<span style="color: #4e555b">\n' +
                '<i class="fab fa-codiepie"></i>&nbsp;项目进度：' + list[i].schedule +
                '</span>&nbsp;&nbsp;&nbsp;&nbsp;\n' +
                '<span style="color: #4e555b">\n' +
                '<i class="far fa-arrow-alt-circle-up"></i>最近更新时间：' + list[i].lastUpdateTime +
                '</span>&nbsp;&nbsp;&nbsp;&nbsp;\n' +
                '<span style="color: #4e555b">\n' +
                '<i class="far fa-circle"></i>功能点：' + list[i].functionPoints +
                '</span>&nbsp;&nbsp;&nbsp;&nbsp;\n' +
                '<span style="color: #4e555b">\n' +
                '<i class="far fa-check-circle"></i>已完成功能点：' + list[i].completedFunctionPoints +
                '</span>\n' +
                '</div>\n' +
                '<div class="col-lg-2">\n'+
                '<a onclick="' + storefunction + '('+ list[i].projectId + ',' + page + ')" style="color: ' + storecolor + '">\n'+
                '<i class="fas fa-star"></i><span>' + list[i].storeCount + '</span>\n' +
                '</a>\n' +
                '<a onclick="' + likefunction + '(' + list[i].projectId + ',' + page + ')" style="color:' + likecolor + '">\n' +
                '<i class="fas fa-heart"></i><span>' + list[i].likeCount + '</span>\n' +
                '</a>\n' +
                '</div>\n' +
                '<hr style="color: #4C5B5C" size="3" width="96%">\n' +
                '</div>\n'
        }
        div.html(tableShow)
    }

    function cancelstore(projectId,page) {
        $.ajax(
            {
                type: "Get",
                url: "/myProjectDelStore",
                data: {
                    projectId: projectId,
                    page: page,
                    status: '1'
                },
                dataType: "json",
                success: function (data) {
                    myprojectAppendHtml(data.list,divName,page);
                    var options = {//根据后台返回的分页相关信息，设置插件参数
                        bootstrapMajorVersion: 3, //如果是bootstrap3版本需要加此标识，并且设置包含分页内容的DOM元素为UL,如果是bootstrap2版本，则DOM包含元素是DIV
                        currentPage: data.page, //当前页数
                        totalPages: data.totalPage, //总页数
                        numberOfPages: data.pageSize,//每页记录数
                        itemTexts: function (type, page, current) {//设置分页按钮显示字体样式
                            switch (type) {
                                case "first":
                                    return "首";
                                case "prev":
                                    return "<";
                                case "next":
                                    return ">";
                                case "last":
                                    return "末";
                                case "page":
                                    return page;
                            }
                        },
                        onPageClicked: function (event, originalEvent, type, page) {//分页按钮点击事件
                            $.ajax({//根据page去后台加载数据
                                url: "/getMyProjectStore",
                                type: "get",
                                dataType: "json",
                                data: {
                                    page: page,
                                },
                                success: function (data) {
                                    myprojectAppendHtml(data.list,div,page);//处理数据
                                }
                            });
                        }
                    };
                    $(myStoreProjectPage).bootstrapPaginator(options);//设置分页
                }
            }
        );
    }

    function cancellike(projectId,page) {
        $.ajax(
            {
                type: "Get",
                url: "/myProjectDelLike",
                data: {
                    projectId: projectId,
                    page: page,
                    status: '1'
                },
                dataType: "json",
                success: function (data) {
                    myprojectAppendHtml(data.list,divName,page);
                }
            }
        );
    }

    function addlike(projectId,page) {
        $.ajax(
            {
                type: "Get",
                url: "/myProjectAddLike",
                data: {
                    projectId: projectId,
                    page: page,
                    status: '1'
                },
                dataType: "json",
                success: function (data) {
                    myprojectAppendHtml(data.list,divName,page);
                }
            }
        );
    }

</script>
</body>
</html>